/* 全局过滤器 */
import Vue from 'vue'
import Config from '@/config/index'

/**
 * 这里即使用全局过滤器也可以单独使用，因为Vue全局过滤器只能在 v-bind 跟 {{}} 中使用。有很大局限性
 * rem 图片获取方面全部当做屏幕宽度750处理
 */

/**
 * 等比缩放，限制在指定w与h的矩形内的最大图片。
 */
const imageLfit = function (value, width, height, type = 'px') {
  if (!value) { return value }
  let widthStr = ''
  let heightStr = ''
  switch (type) {
    case 'px':
      widthStr = width ? `,w_${width}` : ''
      heightStr = height ? `,h_${height}` : ''
      break
    case 'rem':
      widthStr = width ? `,w_${width * Config.remScale}` : ''
      heightStr = height ? `,h_${height * Config.remScale}` : ''
      break
    default:
      return value
  }
  return `${value}?x-oss-process=image/resize,m_lfit${widthStr}${heightStr}`
}
Vue.filter('imageLfit', imageLfit)

/**
 * 等比缩放，延伸出指定w与h的矩形框外的最小图片
 */
const imageMfit = function (value, width, height, type = 'px') {
  if (!value) { return value }
  switch (type) {
    case 'px':
      return `${value}?x-oss-process=image/resize,m_mfit,w_${width},h_${height}`
    case 'rem':
      return `${value}?x-oss-process=image/resize,m_mfit,w_${width * Config.remScale},h_${height * Config.remScale}`
  }
}
Vue.filter('imageMfit', imageMfit)


/**
 * 固定宽高，将延伸出指定w与h的矩形框外的最小图片进行居中裁剪。
 */
const imageFill = function (value, width, height, type = 'px') {
  if (!value) { return value }
  switch (type) {
    case 'px':
      return `${value}?x-oss-process=image/resize,m_fill,w_${width},h_${height}`
    case 'rem':
      return `${value}?x-oss-process=image/resize,m_fill,w_${width * Config.remScale},h_${height * Config.remScale}`
  }
}
Vue.filter('imageFill', imageFill)

/**
 * 视频接帧
 */
const videoFrame = function (value, t, w, h) {
  const wStr = w ? `,w_${w}` : ''
  const hStr = h ? `,h_${h}` : ''
  if (!value) { return value }
  return `${value}?x-oss-process=video/snapshot,t_${t},f_jpg${wStr}${hStr},m_fast`
}
Vue.filter('videoFrame', videoFrame)

export default {
  imageLfit,
  imageMfit,
  imageFill,
  videoFrame
}


